<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.mytrip.model.*" import="com.mytrip.vo.*" import="com.mytrip.util.*" import="java.util.List"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>出发吧</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<jsp:include page="/common/include_js.jsp" />
<script type="text/javascript" src="<%=request.getContextPath() %>/js/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="<%=request.getContextPath() %>/js/bsn.AutoSuggest_2.1.3.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/front/css/css.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/css/autosuggest_inquisitor.css" />
<link rel="stylesheet" type="text/css" media="screen" href="<%=request.getContextPath() %>/front/css/css.css" />
</head>
<body>
<div id="wrap">
  <jsp:include page="include/top.jsp">
  	<jsp:param name="t" value="4" />
  </jsp:include>

  <div id="main">
  	<div id="flight_left">
  	  <div class="flight">
        <div class="hotelBox flightSearch china">
          <div class="search_title">
            <h2 id="search_internal" class="Default"><span>国内及国外酒店搜索</span></h2>
          </div>
          <div class="boxpad">
          	<form action="<%=request.getContextPath() %>/front/order!hotelSearch.action" method="post" id="subForm">
          	<input type="hidden" name="toCity" id="_toCity" value="${toCity.tongchengCityId}" />
          	<input type="hidden" name="priceRange" id="priceRange" value="${priceRange}" />
          	<input type="hidden" name="area" id="area" value="${area}" />
          	<input type="hidden" name="areaBiz" id="areaBiz" value="${areaBiz}" />
          	<input type="hidden" name="chain" id="chain" value="${chain}" />
            <table width="100%" border="0" cellspacing="0" cellpadding="0" class="mr">
              <tr>
                <td width="8%"><b>入住城市</b></td>
                <td width="0"><div class="tlbox qcity">
                    <div class="boxWrapper">
                      <div id="mainXI0" class="boxContainer">
                        <div class="sicon"></div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <input type="text" id="toCity" class="hotelwd flightinput" value="${toCity.name}" />
                    <div class="popContainer"></div>
                  </div></td>
                <td width="8%"><b>酒店信息</b></td>
                <td width="0"><div class="tlbox tlbox2 qcity">
                    <div class="boxWrapper">
                      <div id="mainXI0" class="boxContainer">
                        <div class="sicon"></div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <input type="text" name="key" class="hoteldt flightinput" value="${key}" />
                    <div class="popContainer"></div>
                  </div></td>
              </tr>
              <%
              	java.text.SimpleDateFormat sdf = new java.text.SimpleDateFormat("yyyy-MM-dd");
              	java.util.Date _today = new java.util.Date();
              	String day1 = sdf.format(new java.util.Date(_today.getTime()));
              %>
              <tr>
                <td><b>入住日期</b></td>
                <td><div class="tlbox qcity">
                    <div class="boxWrapper">
                      <div id="mainXI0" class="boxContainer">
                        <div class="sicon"></div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <input type="text" id="fromDate" name="fromDate" class="hotelwd flightinput" onclick="WdatePicker({minDate:'<%=day1 %>',isShowClear:false,readOnly:true});" value="${fromDate}" />
                    <div class="popContainer"></div>
                  </div></td>
                <td><b>离开日期</b></td>
                <td><div class="tlbox tlbox2 qcity">
                    <div class="boxWrapper">
                      <div id="mainXI0" class="boxContainer">
                        <div class="sicon"></div>
                        <div style="clear:both"></div>
                      </div>
                    </div>
                    <input type="text" id="toDate" name="toDate" class="hoteldt flightinput" onclick="WdatePicker({minDate:'#F{$dp.$D(\'fromDate\')}',isShowClear:false,readOnly:true});" value="${toDate}" />
                    <div class="popContainer"></div>
                  </div></td>
                <td><span class="startSth">
                  <input title="搜索" type="button" class="flightsearch" onclick="javascript:subForm();" value="搜索" />
                  </span></td>
              </tr>
            </table>
            </form>
            <table cellspacing="0" cellpadding="0" style="display: block;" class="hotelHot hidden" id="hotelHotTable">
              <tbody>
                <tr>
                  <td id="hotelHotTd"><dl id="dlPrices">
                      <dt>按<b>价格</b>：</dt>
                      <%
                      String priceRange = (String)request.getAttribute("priceRange");
                      priceRange = priceRange!=null?priceRange:"";
                      %>
                      <dd> <span><a href="javascript:void(0);" onclick="javascript:filterData('priceRange','');">全部</a></span> <span <%if(priceRange.equals(",199.99")){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('priceRange',',199.99');">¥200以下</a></span> <span <%if(priceRange.equals("200.00,299.99")){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('priceRange','200.00,299.99');">¥200 - ¥300</a></span> <span <%if(priceRange.equals("300.00,499.99")){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('priceRange','300.00,499.99');">¥300 - ¥500</a></span> <span <%if(priceRange.equals("500.00,")){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('priceRange','500.00,');">¥500及以上</a></span></dd>
                    </dl>
                    <dl id="dlGrades">
                      <dt>按<b>区县</b>：</dt>
                      <dd>
                      <span><a href="javascript:void(0);" onclick="javascript:filterData('area','');">全部</a></span>
                      <%
                      String area = (String)request.getAttribute("area");
                      Integer _area=(area!=null&&!"".equals(area))?Integer.parseInt(area):-1;
                      List<AreaTongcheng> areaList = (List<AreaTongcheng>)request.getAttribute("areaList");
                      for(AreaTongcheng _a: areaList){
                      	Integer aid = _a.getId();
                      %>
                       <span <%if(aid.equals(_area)){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('area','<%=aid%>');"><%=_a.getAreaName()%></a></span>
                      <%
                      }
                      %>
                      </dd>
                    </dl>
                    <dl id="dlPois">
                      <dt>按<b>商区</b>：</dt>
                      <dd>
                      <span><a href="javascript:void(0);" onclick="javascript:filterData('areaBiz','');">全部</a></span>
                      <%
                      String areaBiz = (String)request.getAttribute("areaBiz");
                      Integer _areaBiz=(areaBiz!=null&&!"".equals(areaBiz))?Integer.parseInt(areaBiz):-1;
                      List<AreaBizTongcheng> areaBizList = (List<AreaBizTongcheng>)request.getAttribute("areaBizList");
                      for(AreaBizTongcheng _ab: areaBizList){
                      	Integer abid = _ab.getId();
                      %>
                       <span <%if(abid.equals(_areaBiz)){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('areaBiz','<%=abid%>');"><%=_ab.getAreaBizName()%></a></span>
                      <%
                      }
                      %>
                      </dd>
                    </dl>
                    <dl id="dlBrands">
                      <dt>按<b>品牌</b>：</dt>
                      <dd>
                      <span><a href="javascript:void(0);" onclick="javascript:filterData('chain','');">全部</a></span>
                      <%
                      String chain = (String)request.getAttribute("chain");
                      Integer _chain=(chain!=null&&!"".equals(chain))?Integer.parseInt(chain):-1;
                      List<CityChainTongcheng> chainList = (List<CityChainTongcheng>)request.getAttribute("chainList");
                      for(CityChainTongcheng _c: chainList){
                      	Integer cid = _c.getId();
                      %>
                       <span <%if(cid.equals(_chain)){out.print("style=\"background-color:yellow;\"");} %>><a href="javascript:void(0);" onclick="javascript:filterData('chain','<%=cid%>');"><%=_c.getChainName()%></a></span>
                      <%
                      }
                      %>
                      </dd>
                    </dl></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
      
      <!-- hotel_tpl -->
      <%
      	PageInfo<HotelInfo> pageInfo = (PageInfo<HotelInfo>)request.getAttribute("hotelInfoPage");
      	List<HotelInfo> dataList = pageInfo.getDataList();
      	if(dataList.size()==0){
      %>
      	<div class="queryBox">没有结果</div>
      <%
      	}else{
      		for(HotelInfo hotel : dataList){
      			int hotelId = hotel.getHotelId();
      			String hotelName = hotel.getHotelName();
      			String intro = hotel.getIntro();
      			intro = (intro!=null)?(intro.length()<=40?intro:intro.substring(0,40)+"..."):"";
      			String address = hotel.getAddress();
      %>
      
      <div class="queryBox" id="__hotel_<%=hotelId%>">
	    <div class="img360"><a class="imgWrap" target="_blank" href="javascript:void(0);"><img width="75px" height="75px" alt="" src="<%=hotel.getImg()%>" /></a></div>
	    <div class="txtWrap">
	      <h2 class="hotelName diamondhotel"><a target="_blank" href="javascript:void(0);"><%=hotelName%></a> </h2>
	      <p class="hotelDescription"><%=intro%></p>
	      <p class="hotelDescription"><%=address%></p>
	    </div>
	    <div class="hoteldata">
	      <div class="hoteldata">
	        <table cellspacing="0" cellpadding="0" width="100%" class="htl">
	          <tbody id="__hotel_<%=hotelId%>_rms">
	            <tr class="w150">
	              <td style="width:150px;">房型</td>
	              <td style="width:60px;">说明</td>
	              <td style="width:60px;">床型</td>
	              <td style="width:90px;">宽带</td>
	              <td style="width:60px;">早餐</td>
	              <td style="width:80px;">日均价</td>
	              <td style="width:100px;">支付方式</td>
	              <td>操作</td>
	            </tr>
	          
	         	<!-- room_tpl -->
	       	
	          </tbody>
	        </table>
	        <div class="viewmore"><input type="hidden" id="__hotel_<%=hotelId%>_showAll" value="0" /><a class="moreroom viewDefault" href="javascript:void(0);" name="moreroom" onclick="javascript:showAllRooms('<%=hotelId%>');">查看所有房型/价格</a></div>
	      </div>
	    </div>
	  </div>
      
      <%
      		}
      %>
      <div class="hoteldata"><%=pageInfo.getHtml()%></div>
      <%
      	}
      %>
      
      
    </div>
    
    <jsp:include page="include/flight-right.jsp" />
  </div>
  
  <jsp:include page="include/bottom.jsp" />
</div>

<!-- 实际使用tr -->
<table style="display:none;" id="room_tpl">
<tr>
  <td><a class="roomtype viewDefault" href="javascript:void(0);" name="roomtypeName">普通大床间</a></td>
  <td><div><span class="pricetypeName">标准</span></div></td>
  <td>大</td>
  <td>免费</td>
  <td>无早</td>
  <td><a class="hasbf yen" href="javascript:void(0);">¥620.0</a></td>
  <td>到店支付</td>
  <td><input type="button" onclick="window.location='orderhotel.html'" class="flightsearch" name="bookHotel" value="预订" /></td>
</tr>
</table>

<div id="orderInfo" class="pop dialog" style="height:480px;width:340px;display:none;">
<div class="popHeader"><h1>生成订单</h1><a href="javascript:void(0);" onclick="javascript:hiddenPopDiv();"><span class="close">关闭</span></a></div>
<div class="popInfo">
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:10px 20px 0 20px;">
		<tr><td style="width:100px;">酒店名称</td><td class="o1" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">房间类型</td><td class="o2" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">入住日期</td><td class="o3" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">离店日期</td><td class="o4" style="width:200px;"></td></tr>
		<tr><td style="width:100px;">预订间数</td><td style="width:200px;">
			<select class="o5" onchange="javascript:$('o5_s').set('html','¥'+currentAvgAmount+' x '+duringDate+'天 x '+this.value.toInt()+'间 = '+'¥'+currentAvgAmount*duringDate*this.value.toInt());">
				<option value="1">1</option>
				<option value="2">2</option>
				<option value="3">3</option>
				<option value="4">4</option>
				<option value="5">5</option>
			</select>
		</td></tr>
		<tr><td style="width:100px;">&nbsp;</td><td id="o5_s" class="o6" style="width:200px;"></td></tr>
	</table><br/>
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:0 20px 0px 20px;">
		<tr><td style="width:100px;">入住人信息</td><td style="width:200px;">&nbsp;</td></tr>
		<tr><td style="width:100px;">入住姓名</td><td style="width:200px;"><input type="text" class="o11" /></td></tr>
		<tr><td style="width:100px;">手机号码</td><td style="width:200px;"><input type="text" class="o12" /></td></tr>
		<tr><td style="width:100px;">预计到店时间</td><td style="width:200px;">
			<select class="o13"">
				<option value="6">6:00</option>
				<option value="7">7:00</option>
				<option value="8">8:00</option>
				<option value="9">9:00</option>
				<option value="10">10:00</option>
				<option value="11">11:00</option>
				<option value="12">12:00</option>
				<option value="13">13:00</option>
				<option value="14">14:00</option>
				<option value="15">15:00</option>
				<option value="16">16:00</option>
				<option value="17">17:00</option>
				<option value="18">18:00</option>
				<option value="19">19:00</option>
				<option value="20">20:00</option>
				<option value="21">21:00</option>
				<option value="22">22:00</option>
				<option value="23">23:00</option>
				<option value="24">24:00</option>
			</select>
		</td></tr>
	</table><br/>
	<table cellpadding="0" cellspacing="0" style="width:300px;margin:0 20px 0px 20px;">
		<tr><td style="width:100px;">联系人信息</td><td style="width:200px;">&nbsp;</td></tr>
		<tr><td style="width:100px;">联系人</td><td style="width:200px;"><input type="text" class="o21" /></td></tr>
		<tr><td style="width:100px;">手机号码</td><td style="width:200px;"><input type="text" class="o22" /></td></tr>
	</table><br/>
	<input type="button" onclick="javascript:if(confirm('提交订单?')){confirmOrder();}" value="提交" />
</div>
</div>

<div id="loading_div" class="pop dialog" style="height:100px;width:340px;display:none;">
<div class="popHeader"><h1>提示</h1></div>
<div class="popInfo">loading...</div>
</div>

<div id="pay_div" class="pop dialog" style="height:100px;width:340px;display:none;">
<div class="popHeader"><h1>预订成功</h1></div>
<div class="popInfo">预订成功</div>
</div>

<script type='text/javascript' src='<%=request.getContextPath() %>/dwr/interface/orderAction.js'></script>
<script type='text/javascript'>
var subForm=function(){
	if($('_toCity').value==''){
		alert('请填写完整 入住城市');
		return;
	}
	if($('fromDate').value==''){
		alert('请填写 入住日期');
		return;
	}
	if($('toDate').value==''){
		alert('请填写 离开日期');
		return;
	}
	
	document.getElementById('subForm').submit();
};

var options = {
	script:'<%=request.getContextPath() %>/json/query!hotelCity.action?',
	varname:'k',
	meth:'post',
	json:true,
	shownoresults:false,
	maxresults:10,
	clickOneResult:1,
	callback: function (obj) { document.getElementById('_toCity').value = obj.id; }
};
new bsn.AutoSuggest('toCity', options);


var orderInfoDiv=$('orderInfo');
var roomTpl=$('room_tpl').getElement('tr');
var fromDate='${fromDate}';
var toDate='${toDate}';
var duringDate='${duringDate}';
var maxShowRoom=4;
var currentAvgAmount=0;
var currentHotelId;
var currentRoomTypeId;
var currentBookingCode;
var currentHotelType;
var currentHotelName;
var currentRoomName;


var filterData=function(t,d){
	$(t).set('value',d);
	subForm();
}


var showAllRooms=function(hotelId){
	var showAll=$('__hotel_'+hotelId+'_showAll');
	var es=$$('tr[id^=__hotel_'+hotelId+'_rm_]');
	
	if(showAll.get('value')==0){
		es.each(function(e){e.setStyle('display','block');});
		showAll.set('value','1');
	}else{
		es.each(function(e){e.setStyle('display','none');});
		for(var i=0;i<es.length&&i<maxShowRoom;i++){
			es[i].setStyle('display','block');
		}
		showAll.set('value','0');
	}
};


var showOrder=function(hotelId,roomTypeId,bookingCode,hotelType,hotelName,roomName,avgAmount){
	currentAvgAmount = avgAmount.toFloat();
	currentHotelId=hotelId;
	currentRoomTypeId=roomTypeId;
	currentBookingCode=bookingCode;
	currentHotelType=hotelType;
	currentHotelName=hotelName;
	currentRoomName=roomName;
	
	orderInfoDiv.getElement('.o1').set('html',hotelName);
	orderInfoDiv.getElement('.o2').set('html',roomName);
	orderInfoDiv.getElement('.o3').set('html',fromDate);
	orderInfoDiv.getElement('.o4').set('html',toDate);
	orderInfoDiv.getElement('.o5').options[0].selected=true;
	orderInfoDiv.getElement('.o6').set('html','¥'+currentAvgAmount+' x '+duringDate+'天 x 1间 = ¥'+(currentAvgAmount*duringDate));
	
	orderInfoDiv.getElement('.o11').set('value','');
	orderInfoDiv.getElement('.o12').set('value','');
	orderInfoDiv.getElement('.o13').options[0].selected=true;
	
	orderInfoDiv.getElement('.o21').set('value','');
	orderInfoDiv.getElement('.o22').set('value','');
	
	showPopDiv('orderInfo');
};

var confirmOrder=function(){
	var name_rz=orderInfoDiv.getElement('.o11').get('value');
	var tel_rz=orderInfoDiv.getElement('.o12').get('value');
	var come_time=orderInfoDiv.getElement('.o13').get('value');
	var name_lx=orderInfoDiv.getElement('.o21').get('value');
	var tel_lx=orderInfoDiv.getElement('.o22').get('value');
	var roomNum=orderInfoDiv.getElement('.o5').get('value');
	var guestNum=roomNum;
	
	if(name_rz.trim()==''){
		alert('请填写 入住姓名');
		return;
	}
	if(tel_rz.trim()==''||!/^\d{11}$/.exec(tel_rz)){
		alert('请填写合法的 入住人手机号码');
		return;
	}
	if(name_lx.trim()==''){
		alert('请填写 联系人姓名');
		return;
	}
	if(tel_lx.trim()==''||!/^\d{11}$/.exec(tel_rz)){
		alert('请填写合法的 联系人手机号码');
		return;
	}
	
	hiddenPopDiv();
	showPopDiv('loading_div');
	
	var hotelAddress=$('__hotel_'+currentHotelId).getElements('.txtWrap')[0].getElements('p')[1].get('html');
	
	orderAction.confirmOrderHotel(currentHotelId,currentRoomTypeId,currentHotelType,currentBookingCode,fromDate,toDate,roomNum,guestNum,name_lx,tel_lx,name_rz,tel_rz,come_time,currentHotelName,currentRoomName,currentAvgAmount,hotelAddress,function(res){
		hiddenPopDiv();
		res=eval('('+res+')');
		if(res.success=='1'){
			showPopDiv('pay_div');
		}else{
			alert('订单保存失败');
		}
		
	});
	
};


$$('div[id^="__hotel_"]').each(function(e){
	var hid=e.get('id').substring(8);
	
	orderAction.queryRoomsByHotelId(hid,fromDate,toDate,function(res){
		res=eval('('+res+')');
		if(res.success=='1'){
			var rms=res.rooms;
			for(var i=0;i<rms.length;i++){
				rm=rms[i];
				var _rm=roomTpl.clone();
				_rm.set('id','__hotel_'+res.hotelId+'_rm_'+rm.roomTypeId);
				_rm.getElements('td')[0].getElements('a')[0].set('html',rm.roomName);
				_rm.getElements('td')[2].set('html',rm.bed);
				_rm.getElements('td')[3].set('html',rm.adsl);
				_rm.getElements('td')[4].set('html',rm.breakfast);
				_rm.getElements('td')[5].getElements('a')[0].set('html','¥'+rm.avgAmount);
				
				var ydBtnHtml=''; 
				//bookingCode
				if(rm.roomStatusTotal==0){
					var _showOrderStr='showOrder(\''+res.hotelId+'\',\''+rm.roomTypeId+'\',\''+rm.bookingCode+'\',\''+res.hotelType+'\',\''+res.hotelName+'\',\''+rm.roomName+'\',\''+rm.avgAmount+'\')';
					ydBtnHtml='<input type="button" class="flightsearch" name="bookHotel" value="预订" onclick="javascript:'+_showOrderStr+';" />';
				}else{
					ydBtnHtml='<input type="button" class="flightsearch" name="bookHotel" value="房满" />';
				}
				_rm.getElements('td')[7].set('html',ydBtnHtml);
				
				if(i>=maxShowRoom){
					_rm.setStyle('display','none');
				}
				
				_rm.inject($('__hotel_'+res.hotelId+'_rms'),'bottom');
			}
		}
	});
	
});

</script>
</body>
</html>